<template lang="html">
  <view class="items-container">
    <view class="main-container">
      <view v-if="!isLogined" class="empty-container">
        <img src="~@/static/order_slices/notlogin.png" alt="">
        <text class="tips">当前操作需要先登录</text>
        <view class="toselect-btn" @click="toPage('/pages/login/wechart?redirect=' + redirect)">前往登录</view>
      </view>
      <view v-else>
        <view class="image-container" v-for="product in productsList" :key="product.id">    	
          <img class="images" :src="product.imageUrl">
          <view class="content">
            <view style="flex-grow: 1;">
              <view>
                <span class="fontstyle">{{product.title}}</span>
              </view>
              <view>
                <span class="price-label">市场价</span>
                <span class="price-value">¥{{ product.marketPrice }}</span>
                <span class="price-label">售价</span>
                <span class="price-value self">¥{{ product.price }}</span>
              </view>
            </view>
            <view class="action">
              <button class="appointment-btn" size="mini">后台维护中</button>
              <!--<button class="appointment-btn" size="mini" @click="toOrderPush(product.id)">预约</button>-->
              <!--
              <button size="mini" @click="toPage('/pages/items/detail?id=' + product.id)">详情</button>
              -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { token } from "@/util/storage";
import Vue from "vue";
export default Vue.extend({
  computed: {
    redirect() {
      return encodeURI("/pages/items/index");
    }
  },
  data() {
    return {
      isLogined: true,
      page: 1,
      productsList: []
    };
  },
  onShow() {},
  mounted() {
    // this.isLogined = !!token.get();
    // if (!token.get()) {
    //   uni.showToast({
    //     title: this.$t("main_service.need_login").toString(),
    //     duration: 2000,
    //     icon: "none",
    //   });
    //   this.toPage('/pages/login/index?redirect=' + this.redirect);
    //   return;
    // } else {
    //   this.getList();
    // }
    this.getList();
  },
  methods: {
    getList() {
      this.$mainApi.apiGetProductsByPage(this.page, this.$config.PRODUCTS_PAGE_SIZE).then((res: any) => {
        this.productsList = res.data.records;
      });
    },
    toPage(path: string) {
      location.href = "/#" + path;
    },
    toOrderPush(id: any) {
      location.href = '/#/pages/order/push?id=' + id;
    }
  },
});
</script>

<style>
.items-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.items-container .title {
  font-size: 20px;
  border-left: 5px solid #006b65;
  margin-bottom: 15px;
  margin-left: 15px;
  margin-top: 15px;
  padding-left: 15px;
}

.items-container .image-container {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
}
.image-container {
  margin-bottom: 15px;
}
.image-container .content {
  display: flex;
}
.image-container .content .action button {
  padding: 0px 15px;
  margin-left: 5px;
}
.image-container .images {
  flex-grow: 1;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.fontstyle {
  font-family: PingFangSC-Medium;
  font-size: 15px;
}
.fontstyle2 {
  font-family: Medium;
  font-size: 10px;
}

.fontstyle3 {
  font-family: PingFangSC-Medium;
  color: #ff6c00;
  font-size: 15px;
}

.header-container {
  color: #333333;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right img {
  width: 16px;
  height: 16px;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  width: 100%;
  position: relative;
}

.appointment-btn {
  color: #ffffff;
  background-color: #006b65;
  border-color: #006b65;
}

.empty-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-container img {
  width: 40%;
  margin-bottom: 15px;
}

.empty-container .tips {
  color: #9A9A9A;
  font-size: 16px;
}

.empty-container .toselect-btn {
  color: #FFFFFF;
  font-size: 14px;
  margin-top: 15px;
  padding: 10px;
  background-color: #006b65;
  border-radius: 6px;
}

.price-label {
  font-size: 14px;
  margin-right: 5px;
}

.price-value {
  font-size: 14px;
  margin-right: 10px;
}

.price-value.self {
  color: #006b65;
}
</style>